<template>
  <div class="box">
    <div class="header">
      <van-nav-bar title="详情页" left-arrow @click-left="$router.back()" />
    </div>
    <div class="content">
      <!--详情页轮播图数据展示-->

      <div>
        <van-swipe :autoplay="3000" lazy-render>
           <van-swipe-item>
           <img :src="detailInfo.image" alt="" style="width: 100%" />
            </van-swipe-item>
          <van-swipe-item>
            
            <img src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"  style="width: 100%" />
          </van-swipe-item>
              <van-swipe-item>
            
            <img src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg"  style="width: 100%" />
          </van-swipe-item>
        </van-swipe>
       
      </div>
      <div>
        <p>{{ detailInfo.title }}</p>
        <p style="color: red">￥{{ detailInfo.price }}</p>
      </div>
      <van-action-bar>
        <van-action-bar-icon icon="chat-o" text="客服" dot />
        <van-action-bar-icon
          icon="cart-o"
          text="购物车"
          :badge="store.totalCount"
          @click="$router.push('/cart')"
        />
        <van-action-bar-icon icon="shop-o" text="店铺" badge="12" />
        <van-action-bar-button
          type="warning"
          text="加入购物车"
          @click="addCart"
        />
        <van-action-bar-button type="danger" text="立即购买" />
      </van-action-bar>
    </div>
  </div>
</template>

<script setup>
import request from "@/utils/request";
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import shake from "@/utils/shake";
import { useCounterStore } from "@/stores/counter";
const store = useCounterStore();
const route = useRoute();
const detailInfo = ref({});
onMounted(() => {
  //请求详情熟路
  request
    .get("/detail", {
      params: {
        id: route.params.id,
      },
    })
    .then((res) => {
      if (res.data.code == 200) {
        detailInfo.value = res.data.data;
      }
    });
});

//数据添加到购物车中 防抖效果
const addCart = shake(() => {
  store.addItem(detailInfo.value);
}, 1000);
</script>

<style lang="scss" scoped>
</style>